<template>
  <div class="home">
    这是home
    <button @click="login">跳到login</button>
    <button @click="tabs = !tabs">组件切换</button>
    <el-button type="primary" @click="screenfull" v-if="!isFullscreen"> 全屏</el-button>
    <component :is="(componentId = 'sonone')" v-show="tabs"></component>
    <component :is="(componentId = 'sontwo')" v-show="!tabs"></component>
  </div>
</template>

<script>
import screenfull from "screenfull";
import sonone from "./components/sonone.vue";
import sontwo from "./components/sontwo.vue";
export default {
  name: "home",
  data() {
    return {
      tabs: false,
      isFullscreen: false,
    };
  },
  components: {
    sonone,
    sontwo,
  },
  methods: {
    login() {
      this.$router.push({ path: "/Login" });
    },
    /**
     * @desc :全屏事件
     * @date :
     * @params :
     * @author : liangdecheng
     **/
    screenfull() {
      if (!screenfull.enabled) {
        this.$message({
          message: "Your browser does not work",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
      this.isFullscreen = true;
    },
    /**
     * @desc :是否全屏并按键ESC键的方法
     * @date :
     * @params :
     * @author : liangdecheng
     **/
    checkFull() {
      var isFull =
        document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
  },
  mounted() {
    window.onresize = () => {
       this.isFullscreen = false;
        // 全屏下监控是否按键了ESC
        if (!this.checkFull()) {
          console.log(22222);
          // 全屏下按键esc后要执行的动作
          this.isFullscreen = false;
        }
    };
  },
};
</script>
<style lang="less" scoped>
</style>